<div style="display: grid; grid-template-columns: 110px 100px 90px 80px 80px 60px; grid-auto-rows: minmax(40px, auto)">
  <ti-avatar id="avatar-size-define" style="align-self: center; justify-self: center" size="90px"></ti-avatar>
  <ti-avatar id="avatar-size-xl" style="align-self: center; justify-self: center" size="xl"></ti-avatar>
  <ti-avatar id="avatar-size-large" style="align-self: center; justify-self: center" size="large"></ti-avatar>
  <ti-avatar id="avatar-size-middle" style="align-self: center; justify-self: center" size="middle"></ti-avatar>
  <ti-avatar id="avatar-size-small" style="align-self: center; justify-self: center" size="small"></ti-avatar>
  <ti-avatar id="avatar-size-xs" style="align-self: center; justify-self: center" size="xs"></ti-avatar>
  <div style="align-self: center; justify-self: center">90px</div>
  <div style="align-self: center; justify-self: center">xl</div>
  <div style="align-self: center; justify-self: center">large</div>
  <div style="align-self: center; justify-self: center">middle</div>
  <div style="align-self: center; justify-self: center">small</div>
  <div style="align-self: center; justify-self: center">xs</div>
</div>
